<template>
  <view class="page" v-cloak>
    <!-- 自定义头部 -->
    <view class="cu-custom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
      <view class="cu-bar fixed" :style="style">
        <view class="action" @tap="back">
          <text class="cuIcon-back text-white"></text>
        </view>
        <view class="content text-white" :style="[{top:StatusBar + 'px'}]">
          {{i18n['砍价免费拿']}}
        </view>
        <view class="right padding-right text-white" @click="toggleRuleModal">
          {{i18n['规则']}}
        </view>
      </view>
    </view>
    <!-- 商品信息 -->
    <view class="bargain-content">
      <view class="flex">
        <view class="block-100 margin-right-sm round overHidden">
			<fu-image :src="detail.head_img" mode="aspectFill"></fu-image>
        </view>
        <view class="flex-sub">
          <view class="text-cut text-color-2">{{detail.user_nickname}}：</view>
          <view class="text-cut margin-top-xs">{{i18n['我马上就快砍成啦，快来帮我助力吧~']}}</view>
        </view>
      </view>
      <view class="flex margin-top bg-color">
        <view class="block-220 margin-right-sm radius overHidden">
			<fu-image :src="detail.thumb" mode="aspectFill"></fu-image>
        </view>
        <view class="flex-sub flex flex-direction justify-between padding-right-sm padding-tb-sm">
          <view class="text-cut-2 text-color-2">{{detail.name}}</view>
          <view>
            <view class="text-sm margin-bottom-xs">{{i18n['你帮砍后,好友砍成概率达']}}<text class="text-xl text-color text-bold">98%</text></view>
            <view class="cu-progress round sm">
              <view class="button-color round" :style="[{ width: '98%'}]"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="margin-top">
        <button class="cu-btn round block button-color text-color text-bold text-lg height-88" @click="handleBargain">{{i18n['帮好友砍一刀']}}</button>
      </view>
    </view>
    <!-- 推荐商品 -->
    <fu-waterflow ref="waterflow"></fu-waterflow>
    <!-- 活动规则 -->
    <fu-popup v-model="showRuleModal" mode="center" width="500rpx" height="700rpx" border-radius="16"
      :mask-custom-style="{background: 'rgba(0,0,0,0.9)'}" :mask-close-able="false">
      <view class="rule-box">
        <view class="rule-box-title solid-bottom">
          {{i18n['活动规则']}}
        </view>
        <scroll-view class="rule-box-content" scroll-y>
          <jyf-parser :html="rules"></jyf-parser>
        </scroll-view>
        <view class="rule-box-close solid-top" @click="toggleRuleModal">
          {{i18n['关闭']}}
        </view>
      </view>
    </fu-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showNavbar: false,
        showRuleModal: false,
        bargain_id: '',
        detail: {},
        rules: "",
      }
    },
    computed: {
      style() {
        let StatusBar = this.StatusBar;
        let CustomBar = this.CustomBar;
        let isShow = this.showNavbar;
        if (isShow) {
          return `height:${CustomBar}px;padding-top:${StatusBar}px;background: #ff5834;`;
        } else {
          return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
        }
      },
      uid() {
        return this.$store.getters.uid;
      }
    },
    onLoad(options) {
      const { bargain_id } = options;
      console.log(bargain_id)
      this.bargain_id = bargain_id;
      this.getBargainDetail();
      this.getBargainRuleData();
      // #ifdef APP-PLUS
      plus.runtime.arguments = null;
      plus.runtime.arguments = "";
      // #endif
    },
    methods: {
      // 返回
      back() {
        uni.navigateBack();
      },
      // 切换规则弹窗显示与否
      toggleRuleModal() {
        this.showRuleModal = !this.showRuleModal;
      },
      // 获取砍价单详情
      getBargainDetail() {
        this.$api.post(global.apiUrls.postBargainDetail, {
            bargain_id: this.bargain_id
          })
          .then(res => {
            console.log('砍价详情', res.data)
            if (res.data.code == 1) {
              this.detail = res.data.data;
            }
          })
      },
      // 砍一刀
      handleBargain() {
        this.$util.actionAuth(() => {
          let data = {
            bargain_id: this.bargain_id,
            user_id: this.uid,
          };
          this.$api.post(global.apiUrls.postBargain, data)
            .then(res => {
              console.log('砍一刀', res);
              if (res.data.code == 1) {
                this.$message.info(this.i18n['帮砍成功']);
                uni.reLaunch({
                  url: '/pages/tab/home/shopindex/index'
                })
              } else {
                this.$message.info(res.data.msg);
                setTimeout(() => {
                  uni.reLaunch({
                    url: '/pages/tab/home/shopindex/index'
                  })
                }, 800)
              }
            })
        })
      },
      // 砍价规则
      getBargainRuleData(){
        this.$api.post(global.apiUrls.postOperationGetColumn, {
          category_id: 24,
        }).then(res => {
          var res = res.data
          if (res.code == 1) {
            this.rules = richText.format(res.data.content);
          } else {
            this.rules = ''
          }
        })
      }
    },
    onPageScroll(e) {
      let scrollTop = e.scrollTop;
      if (scrollTop >= 10) {
        this.showNavbar = true;
      } else {
        this.showNavbar = false;
      }
    },
    onReachBottom() {
      this.$refs.waterflow && this.$refs.waterflow.loadData();
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background: linear-gradient(#ff5834, #fed892);
    padding-bottom: 32rpx;
  }

  .bargain-content {
    margin: 32rpx;
    padding: 20rpx 20rpx 50rpx;
    background-color: #fdfdfd;
    border-radius: 16rpx;
  }

  // 规则弹窗
  .rule-box {
    width: 100%;
    height: 100%;
    background-color: #0062CC;
    background: linear-gradient(top, #fcf9df, #fff0c4);

    .rule-box-title {
      height: 100rpx;
      font-size: 36rpx;
      line-height: 100rpx;
      text-align: center;
      font-weight: bold;
      color: #3b2204;
    }

    .rule-box-content {
      height: calc(100% - 200rpx);
      color: #615013;
      padding: 20rpx;
    }

    .rule-box-close {
      height: 100rpx;
      font-size: 32rpx;
      line-height: 100rpx;
      text-align: center;
      color: #615013;
    }
  }

  // 公共样式
  .block-100 {
    width: 100rpx;
    min-width: 100rpx;
    height: 100rpx;
    min-height: 100rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .block-220 {
    width: 220rpx;
    height: 220rpx;
    min-width: 220rpx;
    min-height: 220rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .button-color {
    background: #fadc21;
  }

  .text-color {
    color: $theme;
  }

  .text-color-2 {
    color: #594208;
  }

  .bg-color {
    background-color: #fef6eb;
  }
</style>
